<template>
  <el-dialog
    class="certificate-detail-comp"
    title="资格证书"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    append-to-body
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel">
    <el-table :data="tableData" :max-height="$setRem(400)" row-key="uuid" class="table-container">
      <el-table-column label="证书名称" prop="certificate_name"></el-table-column>
      <el-table-column label="证书编号" prop="certificate_id"></el-table-column>
      <el-table-column label="技能等级" prop="skill_level"></el-table-column>
      <el-table-column label="发证日期">
        <template slot-scope="scope">
                <span class="detail-info">
                  {{ $moment(scope.row.issue_date).format('yyyy-MM-DD HH:mm:ss') }}
                </span>
        </template>
      </el-table-column>
      <el-table-column label="有效期至">
        <template slot-scope="scope">
                <span class="detail-info">
                  {{ $moment(scope.row.validity_period).format('yyyy-MM-DD HH:mm:ss') }}
                </span>
        </template>
      </el-table-column>
      <el-table-column label="发证机关" prop="certificate_authority"></el-table-column>
      <el-table-column label="附件">
        <template slot-scope="scope">
          <div class="btn" @click="getFile(scope.row)">下载</div>
        </template>
      </el-table-column>
      <div class="empty-content" slot="empty">
        <i class="iconfont iconwushuju"></i>
        <p>暂无数据</p>
      </div>
    </el-table>
    <el-pagination
      v-if="total > 10"
      :page-size="pageSize"
      :current-page="pageNo"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    option: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 资格证书列表数据
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      files: []
    };
  },
  computed: {
    idNumber() {
      return this.option.idNumber;
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.tableData = [];
        this.total = 0;
        this.pageSize = 10;
        this.pageNo = 1;
        this.files = [];
        return;
      }
      this.getTableData();
    }
  },
  methods: {
    async getTableData() {
      if (!this.idNumber) return;
      const fm = new FormData();
      fm.append('page', String(this.pageNo));
      fm.append('limit', String(this.pageSize));
      fm.append('id_number', this.idNumber);
      const { success, data } = await this.$Model.getCertificate(fm);
      if (success && Array.isArray(data.data)) {
        this.total = data.count ? data.count - 0 : 0;
        this.tableData = data.data;
      }
    },
    /**
     * 获取证书附件
     */
    async getFile(row = {}) {
      if (!row.uuid) return;
      const fm = new FormData();
      fm.append('certificate_uuid', row.uuid);
      fm.append('page', '1');
      fm.append('limit', '100');
      const { success, data: {
        data
      }} = await this.$Model.getCertificateFile(fm);
      if (success && data) {
        this.files = data;
        this.files.forEach(v => window.open(this.$checkUrl(v.url)));
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    handleCancel() {
      this.$emit('cancel');
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/main";

  .certificate-detail-comp {
    .el-table {
      /deep/ .el-table__body-wrapper {
        max-height: 500px;
        min-height: 300px;
        padding-bottom: 46px;
        overflow-y: auto;
        .btn {
          cursor: pointer;
          color: $mainColor;
          text-decoration: underline;
        }
      }
    }
  }
</style>
